<template>

  <view class="zhuce-container">
    <!-- TAB栏 -->

    <!-- zhuce表单 -->
    <form class="zhuce-form" @submit="zhuce">
      <!-- 表单输入框 -->
      <input type="text" placeholder="用户昵称" name="name" v-model="regInfo.name" class="input-field" placeholder-class="co"/>

      <!-- <input type="password" placeholder="请输入新密码" name="password" v-model="regInfo.password" class="input-field" />

      <input type="password" placeholder="请确认新密码" name="password" v-model="regInfo.cPassword" class="input-field" @blur="isConfirmPwd" />

      <view class="verification-code">
        <input type="text" placeholder="请输入验证码" name="verificationCode" v-model="regInfo.verificationCode" class="input-field input-verification-code" />
        <view v-if="!counting" class="send-verification-code" @click="startCountdown" :class="{ disabled: counting }">{{ counting ? `${countdown}秒后重试` : '发送验证码' }}</view>

        <view v-else class="send-verification-code disabled">{{ countdown }}秒后重试</view>
      </view> -->

      <!-- 登录按钮 -->
      <button class="zhuce-button" form-type="submit">确定</button>
     
    </form>

    <!-- 	{{phoneNumber}}
	{{password}}
	{{verificationCode}}
	{{chooseRole}} -->
  </view>
</template>

<script>
export default {
  data() {
    return {
     
      regInfo: {
        name: '', //用户昵称
        
      }
    };
  },

  methods: {
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    /**
     * @param {Object} tab 切换登录方式
     */
    // switchTab(tab) {
    //   this.activeTab = tab;
    // },

    /**
     * 手机号校验
     */
    validatePhoneNumber() {
      // 长度校验
      if (this.regInfo.name.length !== 11) {
        // 注意这里使用 !== 表示不等于
        return false;
      }

      

      return true;
    },


  }
};
</script>

<style scoped lang="scss">
	
.zhuce-container {
  background-color: #333333;
  border:0;
  border-radius: 20rpx;

  box-sizing: border-box;
  padding: 50rpx;
  width: 600rpx;
  // height: 650rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -170%); //绝对值由小到大==>左右 下上
  
  .tab-bar {
    display: flex;
    justify-content: space-around;
    font-size: 32rpx;
    .common {
      width: 200rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tab-active {
      color: #1684fc;
      background-color: #e6f7ff;
      border-bottom: 4rpx #1684fc solid;
    }
  }

  .zhuce-form {
    margin-top: 40rpx;

    .input-field {
		
      width: 100%;
      height: 80rpx;
      margin-top: 30rpx; //必须与verification-code的同一样式同步
      margin-bottom: 20rpx;
      padding: 10rpx;
      box-sizing: border-box;
      border: 1px solid rgb(255, 182, 18);;
      border-radius: 10rpx;
	  background-color:rgb(79, 79, 79);
    }
	.co{
			color: rgb(255,255,255);
		}

    .verification-code {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      // 验证码输入框
      .input-verification-code {
        height: 80rpx;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 20rpx;
      }
      // 密码发送按钮
      .send-verification-code {
        height: 70rpx;
        width: 300rpx;
        padding: 0;
        font-size: 30rpx;
        color: white;
        border: none;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ff00ff;
      }
    }

    .disabled {
      cursor: not-allowed; //当鼠标光标悬停在该元素上方时，光标将变为禁止符号
    }

    .radioGroup {
      margin: 30rpx 0;
      display: flex;
      justify-content: space-around;
    }

    .zhuce-button {
      width: 100%;
      height: 80rpx;
      background-color: rgb(255, 182, 18);
      color: white;
      border: none;
      border-radius: 10rpx;
      cursor: pointer;
      &:active {
        background-color: #4095e5;
      }
    }
  }
}
</style>
